<template>
    <el-breadcrumb :separator-icon="ArrowRight" class="barderCrumbBox">
        <transition-group name="list" tag="span" model="in-out">
            <el-breadcrumb-item v-for="(item) in breadcrumbList" :key="item.path">
                {{ item.title }}
            </el-breadcrumb-item>
        </transition-group>
    </el-breadcrumb>
</template>

<script setup>
import { ArrowRight } from "@element-plus/icons-vue";
import { ref, watch } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
const breadcrumbList = ref([]);

// 生成面包屑数据
const generateBreadcrumb = () => {
    const matched = route.matched;
    breadcrumbList.value = matched.map((item) => ({
        title: item.meta?.title || item.name,
        path: item.path,
    }));
};

// 监听路由变化
watch(
    () => route.path,
    () => {
        generateBreadcrumb();
    },
    { immediate: true }
);
</script>

<style lang="scss" scoped>
.barderCrumbBox {
    font-size: 14px;
}

.list-enter-active {
    // transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
    transition: all 0.5s ease-out;
}

.list-enter-from {
  transform: translateX(30px);
  opacity: 0;
}
</style>